<template>
  <view>
    <button
        open-type="chooseAvatar"
        @chooseavatar="changeAvatar"
        class="box a-box">
      <view style="display: inline-block;vertical-align: top;width: calc(100% - 200rpx)">
        <view style="height: 20rpx"></view>
        <view class="title">{{$i18n.zhToGlobal("头像")}}</view>
        <view class="tips">{{$i18n.zhToGlobal("点击此处修改头像")}}</view>
      </view>
      <view style="display: inline-block;width: 120rpx;text-align: center">
        <!-- 选择微信头像 -->
        <button
            style="margin-top: 40rpx"
            class="avatar-box">
          <image
              v-if="userInfo.fileIdOfAvatar"
              class="avatar"
              mode="widthFix"
              :src="$kt.file.visit(userInfo.fileIdOfAvatar)"
          ></image>
          <image
              v-else
              class="avatar"
              mode="widthFix"
              :src="$kt.file.byPath('image/logo.png')"></image>
        </button>
      </view>
    </button>
    <view class="box">
      <view>{{$i18n.zhToGlobal("昵称")}}</view>
      <view style="height: 10rpx"></view>
      <input
          type="nickname"
          class="info-input"
          :placeholder="$i18n.zhToGlobal('请输入昵称')"
          v-model="userInfo.nickname"
      ></input>
    </view>
    <view class="bottom">
      <view
          class="button-exit bottom-button"
          @click="toCancel"
      >
        {{$i18n.zhToGlobal("取消")}}
      </view>
      <view
          class="button-save bottom-button"
          @click="toSave">
        {{$i18n.zhToGlobal("保存")}}
      </view>
    </view>
    <textarea
      v-model="detail"></textarea>
  </view>
</template>

<script>

export default {
  data() {
    return {
      userInfo: {
        nickname: "",
        fileIdOfAvatar: "",
      },
      isSaving: false,
      detail:""

    };
  },
  onLoad() {
    this.userInfo = this.$kt.userAccount.getSelf();
    // 修改标题
    uni.setNavigationBarTitle({
      title: this.$i18n.zhToGlobal('信息变更')
    });

  },
  methods: {
    toCancel() {
      uni.navigateBack();
    },
    changeAvatar(e) {
      if (this.isSaving) {
        return;
      }
      this.isSaving = true;
      console.log(e.detail.avatarUrl);
      uni.showLoading({
        title: '上传中....'
      });
      // 上传头像
      this.$kt.request.uploadFile({
        data: {
          file: e.detail.avatarUrl,
          groupCode: "userAccountAvatar"
        },
        stateSuccess: (res) => {
          this.userInfo.fileIdOfAvatar = res.data.id;
          uni.hideLoading();
          this.isSaving = false;
        },
        stateFail: (err) => {
          uni.showToast({
            title: err.errMsg,
            icon: 'none'
          });
          uni.hideLoading();
          this.isSaving = false;
        }
      })
    },
    toSave() {
      if (this.isSaving) {
        return;
      }

      uni.showLoading({
        title: '保存中....'
      });
      this.isSaving = true;
      console.debug(JSON.stringify(this.userInfo));
      this.$kt.requestSecurity.send({
        uri: "/user-account-web/userAccount/saveSelf",
        data: this.userInfo,
        stateSuccess: (res) => {
          uni.hideLoading();

          this.$kt.userAccount.requestSelf().then(()=>{
            uni.navigateBack();
          });
        },
        stateFail: (err) => {
          uni.hideLoading();
          this.isSaving = false;
          uni.showToast({
            title: err.errMsg,
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>

.box {
  padding: 20rpx;
  box-sizing: border-box;
  margin-bottom: 50rpx;

  .title {
    position: relative;
    font-size: 36rpx;
    color: #333;

    .title-plus {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 32rpx;
      color: #666;
      border: 1rpx solid #666666;
      border-radius: 55%;
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
    }

  }

  .tips {
    font-size: 24rpx;
    color: #666;
  }

  text-align: left;
  border: none;
  border-bottom: 1rpx solid #f0f0f0;
  background-color: #fff;

  .info-input {
    width: 100%;
    border: none;
    font-size: 32rpx;
    color: #000;
    background-color: #fff;
    font-weight: bold;
  }
}

.a-box {
  border: none;
  border-bottom: 1rpx solid #f0f0f0;
}

.a-box:active {
  opacity: .8;
}

.avatar-box {
  position: relative;
  display: inline-block;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
  border: none;

  .avatar {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

}

.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 20rpx;
  box-sizing: border-box;

  .button-exit {
    width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 32rpx;
    color: #666;
    border: 1rpx solid #999999;
    border-radius: 10rpx;
  }

  .button-save {
    width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 32rpx;
    color: #fff;
    background-color: #000008;
    border-radius: 10rpx;
  }
}

.bottom-button:active {
  opacity: .8;
}

.remove-btn {
  position: relative;
  display: inline-block;
  right: 0;
  top: 0;
  font-size: 24rpx;
  color: #ff0000;
}

.edit-btn {
  position: relative;
  display: inline-block;
  right: 0;
  top: 0;
  font-size: 24rpx;
  color: #666;
}

.btn {
  display: inline-block;
  font-size: 24rpx;
  margin-right: 20rpx;
}

.btn:active {
  opacity: .8;
}

.tag {
  display: inline-block;
  padding: 5rpx 20rpx;
  background-color: rgba(0, 0, 0, .8);
  color: #fff;
  margin-left: 20rpx;
  font-size: 26rpx;
  font-weight: lighter;
  border-radius: 30rpx;
}

.a-a {
  font-size: 32rpx;
  color: #666;
  margin-right: 20rpx;
}

.radio-group {
  .radio {
    display: inline-block;
    padding: 10rpx 20rpx;
    border: 1rpx solid #666;
    border-radius: 30rpx;
    font-size: 26rpx;
    color: #999;
    margin-right: 20rpx;
  }

  .radio-active {
    background-color: #17A095;
    color: #fff;
  }
}
</style>
